<template>
	<view class="content">
		<view style="height: 100rpx;"></view>
		<view style="width: 90%;position: fixed;top: 100rpx;">
			<uni-icons v-if="backId != -1" @click="back" type="back" size="30" style="color: #000;"></uni-icons>
		</view> 
		<view style="height: 100rpx;"></view>
		
		<image style="width: 150rpx;height: 150rpx;border-radius: 50%;margin-top: 80rpx;" src="/static/logo.png" mode="aspectFill"></image>
		
		
		<view style="width: 50%;display: flex;justify-content: center;margin-top: 40rpx;">
			<view style="font-size: 35rpx;font-weight: bold;color: #000;">{{ind == 0 ? '手机号登录' : '邮箱登录'}}</view>
		</view>
		<!-- <view style="font-size: 25rpx;color: #999999;">使用手机号或邮箱进行登录</view> -->
		
		<view v-if="ind == 0" style="width: 80%;display: flex;justify-content: center;background-color: rgba(225, 225, 225, .4);border-radius: 50rpx;margin-top: 40rpx;color: #000;">
			<input v-model="form.user"  style="width: 90%;padding: 30rpx 0;" placeholder="请输入手机号" placeholder-class="pcls"/>
		</view>
		<view v-else style="width: 80%;display: flex;justify-content: center;background-color: rgba(225, 225, 225, .4);border-radius: 50rpx;margin-top: 40rpx;color: #000;">
			<input v-model="form.email"  style="width: 90%;padding: 30rpx 0;" placeholder="请输入邮箱" placeholder-class="pcls"/>
		</view>
	<!-- 	<view style="width: 80%;display: flex;justify-content: center;background-color: rgba(225, 225, 225, .4);border-radius: 50rpx;margin-top: 20rpx;color: #000;">
			<input type="pa" v-model="form.pass"  style="width: 90%;padding: 30rpx 0;" placeholder="请输入密码" placeholder-class="pcls"/>
		</view> -->
		<view style="width: 80%;border-radius: 50rpx;background-color:  rgba(225, 225, 225, .4);display: flex;align-items: center;color: #000;margin-top: 20rpx;justify-content: center;">
			<view style="width: 90%;display: flex;align-items: center;">
				<input v-model="form.pass" :password="showPassword" :placeholder="$t('login.3')" placeholder-class="pcls"
					style="flex: 1;padding: 30rpx 0rpx;" />
						
				<view v-if="form.pass" style="margin-right: 10rpx;">
					<uni-icons @click="showPassword = false" v-if="showPassword" type="eye" size="25"
						style="font-size: 40rpx;color: #000;"></uni-icons>
					<uni-icons @click="showPassword = true" v-else type="eye-filled" style="color: #000;font-size: 40rpx"
						size="25"></uni-icons>
				</view>
			</view>
		
		</view>
		
		<view @click="login" style="width: 80%;margin-top: 80rpx;">
			<button class="puBut3" style="width: 100%;font-size: 30rpx;border-radius: 40rpx;color: #fffff;">登录</button>
		</view>

		<view
			style="width: 80%;display: flex;justify-content: space-between;font-size: 25rpx;color: #53462D;font-weight: bold;margin-top: 20rpx;">
			<view>
				<checkbox-group @change="checkboxChange" v-if="hCpass">
					<label style="display: flex;">
						<view style="transform: translate(0,-5rpx);">
							<checkbox value="jz" :checked="rememberPass" color="#06DB9A"
								style="transform: scale(0.7);" />
						</view>
						<view style="transform: translate(-10rpx,0);width: 100rpx;overflow: hidden;white-space: nowrap;color: #000;">{{$t('login.13')}}</view>
					</label>
				</checkbox-group>
			</view>
		
			<view style="display: flex;color: #000;">
				<view @click="toRegister" style="margin-right: 20rpx;width: 100rpx;overflow: hidden;white-space: nowrap;text-align: right;">{{$t('login.4')}}</view>
				<view @click="phoneLogin" style="width: 140rpx;overflow: hidden;white-space: nowrap;">{{$t('login.5')}}</view>
				<view @click="forgetPwd" style="margin-left: 20rpx;width: 100rpx;overflow: hidden;white-space: nowrap;">{{$t('login.6')}}</view>
			</view>
		</view>
		
	
		<view style="width: 80%;display: flex;justify-content: center;margin-top: 60rpx;">
			<view @click.stop="phoneLogin" style="display: flex;align-items: flex-end;justify-content: center;"
				class="bg4">
			</view>
		</view>
		
		<view style="width: 80%;display: flex;margin-top: 80rpx;">
			<view>
				<radio style="transform: scale(0.7);" @click="radioFalg ? radioFalg = false : radioFalg = true" value=""
					:checked="radioFalg" :color="'#06DB9A'" />
			</view>
			<view style="font-size: 25rpx;color: #000;">{{$t(('login.8'))}},《<span style="color: #06DB9A;font-weight: bold;"
					@click="agreement">{{$t('login.9')}}</span>》{{$t('login.10')}} 《<span
					style="color: #06DB9A;font-weight: bold;"
					@click="privacy">{{$t('login.11')}}</span>》，{{$t('login.12')}}</view>
		</view>
	</view>
</template>

<script>
	import methods from "@/utils/methods.js"
	import {
		encryption
	} from "@/static/js/aesEncrypt.js"
	import main from "../../utils/main.js"
	export default {
		data() {
			return {
				backId:'',
				ind:0,
				rememberPass: false,
				hCpass: '',
				radioFalg:false,
				showPassword: true,
				form: {
					pass: '',
					user: '',
					email:''
				},
				loginType:[
					{
						id:0,
						label:'手机号登录'
					},
					{
						id:0,
						label:'邮箱登录'
					},
				]
			}
		},
		onLoad(data) {
			if (data.id) {
				this.backId = data.id
			}
			const phone = uni.getStorageSync('phone');
			const email = uni.getStorageSync('email');
			const pass = uni.getStorageSync('pass');
			const rememberPass = uni.getStorageSync('rememberPass');
			if (pass) {
				this.hCpass = pass
			}
			if (rememberPass && pass) {
				this.rememberPass = true
				this.form.pass = pass
			}
			//.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
			if (phone) {
				this.form.user = phone
			}
			if (email) {
				this.form.email = email
			}
		},
		mounted() {
			
		},
		methods: {
			forgetPwd(){
				uni.navigateTo({
					url:`/pages/login/forgetPwd?id=${this.ind}`
				})
			},
			phoneLogin() {
				uni.navigateTo({
					url:`/pages/login/codeLogin?id=${this.ind}`
				})
			},
			checkboxChange: function(e) {
				if (e.detail.value[0] == 'jz') {
					if (this.hCpass) {
						uni.setStorageSync('rememberPass', true)
						this.form.pass = this.hCpass
					}
				} else {
					if (this.hCpass) {
						uni.removeStorageSync('rememberPass')
						this.form.pass = ''
					}
				}
			},
			login(){
				if (!this.radioFalg) {
					uni.showToast({
						icon: 'none',
						title: this.$t('common.29')
					})
					return
				}
				if (!this.form.pass) {
					uni.showToast({
						icon: 'none',
						title: this.$t('common.32')
					})
					return
				}
				if(this.ind == 0){
					if (!this.form.user) {
						uni.showToast({
							icon: 'none',
							title: this.$t('common.30')
						})
						return false
					} else {
						var pattern = /^1[03456789]\d{9}$/;
						let falg = pattern.test(this.form.user);
						if (!falg) {
							uni.showToast({
								icon: 'none',
								title: this.$t('common.31')
							})
							return false
						}
					}
					methods.getEncryptedString().then(res => {
					
						if (res.data.code == 200) {
							if (res.data.data) {
								//加密用户手机号
								const maxUserIphone = encryption(this.form.user, res.data.data.key, res.data.data
									.iv);
								//加密用户密码
								const maxPassword = encryption(this.form.pass, res.data.data.key, res.data.data
									.iv);
					
								let obj = {
									phone: maxUserIphone,
									password: maxPassword
								}
								methods.login(obj).then(res => {
									if (res.data.code == 200) {
										if (res.data.data) {
											// this.$store.dispatch('time')
											// if (!this.$store.state.isOpen) {
											// 	this.$store.dispatch('link')
											// }
											main.loginSuc(res.data.data.info,this.form.use,this.form.pass)
											console.log('1')
											uni.showToast({
												icon: 'none',
												title: res.data.message
											})
					
											setTimeout(() => {
												uni.reLaunch({
													url: '/pages/index/index'
												})
											}, 1000)
										}
									}
								}).catch(err => {
									uni.showToast({
										icon: 'none',
										title: err.data.message
									})
									// if (err.data.code == -104) {
									// 	setTimeout(() => {
									// 		uni.navigateTo({
									// 			url: '/pages/login/updatePass'
									// 		})
									// 	}, 1000)
									// }
								})
							}
						}
					})
					
				}else{
					if (!this.form.email) {
						uni.showToast({
							icon: 'none',
							title: this.$t('common.40')
						})
						return false
					} else {
						let re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
						let falg = re.test(this.form.email);
						if (!falg) {
							uni.showToast({
								icon: 'none',
								title: this.$t('common.39')
							})
							return false
						}
					}
					
					
					methods.getEncryptedString().then(res => {
						if (res.data.code == 200) {
							if (res.data.data) {
								//加密用户密码
								const maxPassword = encryption(this.form.pass, res.data.data.key, res.data.data
									.iv);
					
								let obj = {
									email: this.form.email,
									password: maxPassword
								}
								methods.emailLogin(obj).then(res => {
									if (res.data.code == 200) {
										if (res.data.data) {
											main.loginSuc(res.data.data.info,this.form.email,this.form.pass)
										
											uni.showToast({
												icon: 'none',
												title: res.data.message
											})
					
											setTimeout(() => {
												uni.reLaunch({
													url: '/pages/index/index'
												})
											}, 1000)
										}
									}
								}).catch(err => {
									uni.showToast({
										icon: 'none',
										title: err.data.message
									})
									// if (err.data.code == -104) {
									// 	setTimeout(() => {
									// 		uni.navigateTo({
									// 			url: '/pages/login/updatePass'
									// 		})
									// 	}, 1000)
									// }
								})
							}
						}
					})
				}
				
				
				
				
				
			},
			back() {
				uni.navigateBack()
			},
			agreement(){
				
			},
			privacy(){
				
			},
			toRegister(){
				uni.navigateTo({
					url:`/pages/login/register?id=${this.ind}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background: linear-gradient(to bottom, #DFD7F9 0px, #f2f0f9 398rpx, #F5F6F8 100%)
	}
	.pcls{
		font-size: 25rpx;
		color: #000;
	}
	.bg4 {
		width: 100rpx;
		height: 100rpx;
		background-image: url('@/static/images/login2.png');
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center;
	}
	.loginTypeCls{
		color: #06DB9A;
		font-weight: bold;
	}
	.loginTypeCl2{
		color: #000;
	}
</style>